@for (tag of tags; track tag) {
  <nz-tag [nzMode]="$index === 0 ? 'default' : 'closeable'" (nzOnClose)="handleClose(tag)">
    {{ sliceTagName(tag) }}
  </nz-tag>
}

<nz-tag *ngIf="!inputVisible" class="editable-tag" onkeypress="" nzNoAnimation (click)="showInput()">
  <span nz-icon nzType="plus"></span>
  添加列
</nz-tag>

<button style="float: right" class="m-r-8" nz-button nzType="primary" (click)="insertLine()">添加行</button>
<input *ngIf="inputVisible" #inputElement nz-input nzSize="small" type="text" [(ngModel)]="inputValue" style="width: 78px" (blur)="handleInputConfirm()" (keydown.enter)="handleInputConfirm()" />

<div style="margin-top: 20px">
  <nz-table #basicTable [nzBordered]="true" [nzData]="dataSourceList" [nzCustomColumn]="customColumn">
    <thead>
      <tr>
        @for (column of customColumn; track column) {
          <th [id]="column.value" [nzCellControl]="column.value">{{ column.name }}</th>
        }
      </tr>
    </thead>
    <tbody>
      @for (data of dataSourceList; track data) {
        <tr>
          @for (column of customColumn; track column) {
            <td [nzCellControl]="column.value">
              <div onkeypress="" class="editable-cell" *ngIf="column.value !== 'action'" [hidden]="editId === data.id && column.value !== 'action'" (click)="startEdit(data.id)">
                {{ data[column.value] }}
              </div>
              <div onkeypress="" class="editable-cell" *ngIf="column.value === 'action'" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                <a (click)="deleteRecord(data.id)">{{ data[column.value] }}</a>
              </div>
              <input [hidden]="editId !== data.id" type="text" *ngIf="column.value !== 'action'" nz-input [(ngModel)]="data[column.value]" (blur)="stopEdit()" />
            </td>
          }
        </tr>
      }
    </tbody>
  </nz-table>
</div>
